<!--
* @description 参数1
* @fileName 05.显示隐藏
* @author userName
* @date 2024-01-22 11:25:38
* @version V1.0.0
!-->
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>05.显示隐藏</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>
</head>

<body>
   <!-- 
    v-if 表示是 将节点从页面中移除
    -->
    <div id="app">
        <button @click="handlerShowOrHide">{{msg}}</button>
        <!-- 单if -->
        <div v-if="flag" style="width: 500px;height: 500px;background-color: red;">我是一个盒子</div>
        <!-- if else -->
        <hr>
        <div v-if="flag2" style="width: 500px;height: 500px;background-color: red;"></div>
        <div v-else style="width: 500px;height: 500px;background-color: blue;"></div>
        <button @click="handlerRed">红色</button>
        <button @click="handlerBlue">蓝色</button>
        <button @click="handlerGreen">绿色</button>
        <div v-if="color=='red'" style="width: 500px;height: 500px;background-color: red;"></div>
        <div v-else-if="color=='blue'" style="width: 500px;height: 500px;background-color: blue;"></div>
        <div v-else-if="color=='green'" style="width: 500px;height: 500px;background-color: green;"></div>
        <div v-else style="width: 500px;height: 500px;background-color: pink;"></div>
    </div>

    <script>
        var vm = new Vue({
            data:{
                msg:"隐藏",
                flag:true,
                flag2:true,
                color:""
            },
            methods:{
                handlerShowOrHide() {
                    this.flag = !this.flag
                    this.flag2 = !this.flag2
                    this.msg =  this.msg == "显示" ? "隐藏" :"显示"

                },
                handlerRed() {
                    this.color = 'red'

                },
                handlerBlue() {
                    this.color = 'blue'
                },
                handlerGreen() {
                    this.color = 'green'
                }
            }
        });
        vm.$mount("#app")
    </script>
</body>

</html>